<template>
  <div>
    <div class="middle-top">
      <div class="m1">
        <div class="shu">
          <dv-border-box-7 :color="['transparent', '#02a6b5']">
            <ul>
              <li>217021468</li>
              <li>46987153</li>
              <li>165524088</li>
              <li>4510227</li>
            </ul>
          </dv-border-box-7>
        </div>
        <div class="shu1">
          <ul>
            <li>累计确诊</li>
            <li>现存确诊</li>
            <li>累计治愈</li>
            <li>累计死亡</li>
          </ul>
        </div>
      </div>

      <div class="m2">
        <div class="lei">累计确诊</div>
        <div class="xian">现存确诊</div>
      </div>
    </div>
    <!-- 中下 -->
    <div class="middle-bottom">
      <!-- 地图 -->
      <div class="middleBottomBar"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: myaaaFont;
  src: url(../assets/digital.TTF);
}
 
.middle-top {
  .m1 {
    width: 100%;
    height: 70%;
    // background-color: beige;
    box-sizing: border-box;
    padding-top: 8px;
    background-color: rgba(10, 29, 101, 0.7); 
    .shu {
      width: 94%;
      height: 70%;
      // border: 1px solid red;
      margin-left: 17px;
      margin-top: 20px;
      position: relative;
      border: 1px solid rgb(5, 46, 96); 
      ul {
        width: 90%;
        display: flex;
        justify-content: space-around;
        margin-left: 30px;
        margin-top: 20px;
      }    
      li {
        list-style: none;
        color: rgb(253, 235, 132);
        font-family: myFont;
        margin-top: 5px;
        margin-left: -100px;
        font-size: 30px;
        font-weight: 800;
        padding-right: 5px;
        border-right: 1px solid rgb(8, 76, 159);
        font-family: myaaaFont;
      }
    }

    .shu1 {
      width: 90%;
      height: 30%;
      // border: 1px solid red;
      margin-left: 17px;
      color: white;

      ul {
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        margin-top: 5px;
      }

      li {
        list-style: none;
      }
    }
  }
  .m2 {
    // background-color: aqua;
    margin-top: 14px;
    display: flex;
    height: 30%;
    justify-content: space-around;

    .lei {
      width: 120px;
      height: 40px;
      color: white;
      background: rgba(23, 58, 133, 0.7);
      text-align: center;
      line-height: 40px;
      border-radius: 30px 30px 30px 30px;
    }

    .lei:hover {
      color: rgb(224, 203, 85);
      cursor: pointer;
    }
    .xian {
      width: 120px;
      height: 40px;
      color: rgb(224, 203, 85);
      background: rgba(23, 58, 133, 0.7);
      text-align: center;
      line-height: 40px;
      border-radius: 30px 30px 30px 30px;
      cursor: pointer;
    }
  }
}
</style>